<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BiliBili智能学习平台 - Ultra增强版</title>
    <link rel="stylesheet" href="enhanced_style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <svg class="bilibili-logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path d="M155 40 L175 20 M45 40 L25 20" stroke="currentColor" stroke-width="12" stroke-linecap="round"/>
                    <rect x="20" y="40" width="160" height="120" rx="20" fill="currentColor"/>
                    <circle cx="70" cy="90" r="15" fill="white"/>
                    <circle cx="130" cy="90" r="15" fill="white"/>
                    <path d="M70 130 Q100 140 130 130" stroke="white" stroke-width="10" fill="none" stroke-linecap="round"/>
                </svg>
                <div class="logo-text">
                    <h1>BiliBili智能学习平台</h1>
                    <p class="subtitle">🚀 Ultra增强版 · 智能学习路径 · 个性化推荐</p>
                </div>
            </div>
            <div class="header-nav">
                <button class="nav-btn active" data-tab="analyze">
                    <i class="fas fa-brain"></i>
                    智能分析
                </button>
                <button class="nav-btn" data-tab="series">
                    <i class="fas fa-layer-group"></i>
                    系列课程
                </button>
                <button class="nav-btn" data-tab="learning">
                    <i class="fas fa-graduation-cap"></i>
                    学习路径
                </button>
                <button class="nav-btn" data-tab="knowledge">
                    <i class="fas fa-network-wired"></i>
                    知识图谱
                </button>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 智能分析标签页 -->
            <section id="analyzeTab" class="content-section active">
                <!-- 原有的分析功能 -->
                <div class="input-section">
                    <div class="input-container">
                        <div class="input-wrapper">
                            <i class="fas fa-link input-icon"></i>
                            <input
                                type="text"
                                id="videoUrl"
                                placeholder="请输入B站视频链接（BV号）支持多种格式..."
                                class="video-input"
                            >
                        </div>
                        <div class="input-actions">
                            <button id="analyzeBtn" class="analyze-btn">
                                <i class="fas fa-magic"></i>
                                <span>智能分析</span>
                            </button>
                            <button id="batchAnalyzeBtn" class="batch-btn">
                                <i class="fas fa-list"></i>
                                <span>批量分析</span>
                            </button>
                        </div>
                    </div>
                    <div class="example-links">
                        <span class="example-label">💡 快速体验：</span>
                        <a href="#" class="example-link" data-url="https://www.bilibili.com/video/BV15C4Pz9EyT">苏联笑话</a>
                        <a href="#" class="example-link" data-url="https://www.bilibili.com/video/BV1uv411q7Mv">科技视频</a>
                        <a href="#" class="example-link" data-url="https://www.bilibili.com/video/BV1J54UzHE2k">热门视频</a>
                    </div>
                </div>

                <!-- 批量分析模态框 -->
                <div id="batchModal" class="modal hidden">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>批量视频分析</h3>
                            <button class="close-btn" onclick="closeBatchModal()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <textarea id="batchInput" placeholder="请输入多个B站视频链接，每行一个..." rows="6"></textarea>
                            <div class="batch-options">
                                <label>
                                    <input type="checkbox" id="saveResults" checked>
                                    保存分析结果
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn-cancel" onclick="closeBatchModal()">取消</button>
                            <button class="btn-primary" onclick="startBatchAnalysis()">
                                <i class="fas fa-play"></i>
                                开始批量分析
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 原有的加载动画和结果展示 -->
                <div id="loadingSection" class="loading-section hidden">
                    <!-- 加载动画内容（保持不变） -->
                </div>

                <div id="resultSection" class="result-section hidden">
                    <!-- 增强的结果展示 -->
                    <div class="result-header">
                        <div class="video-card">
                            <!-- 原有的视频信息卡片 -->
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn" id="recommendationsBtn">
                                <i class="fas fa-lightbulb"></i>
                                <span>相关推荐</span>
                            </button>
                            <button class="action-btn" id="addToPathBtn">
                                <i class="fas fa-plus-circle"></i>
                                <span>加入学习路径</span>
                            </button>
                        </div>
                    </div>

                    <!-- 推荐视频区域 -->
                    <div id="recommendationsSection" class="recommendations-section hidden">
                        <h3><i class="fas fa-lightbulb"></i> 相关推荐</h3>
                        <div class="recommendation-grid" id="recommendationGrid">
                            <!-- 推荐视频卡片 -->
                        </div>
                    </div>

                    <!-- 原有的四大板块内容 -->
                    <div class="tabs-wrapper">
                        <!-- 原有标签页内容 -->
                    </div>
                </div>
            </section>

            <!-- 系列课程标签页 -->
            <section id="seriesTab" class="content-section hidden">
                <div class="series-analyzer">
                    <div class="input-section">
                        <div class="input-container">
                            <div class="input-wrapper">
                                <i class="fas fa-user-circle input-icon"></i>
                                <input
                                    type="text"
                                    id="uploaderId"
                                    placeholder="请输入UP主UID或用户名..."
                                    class="video-input"
                                >
                            </div>
                            <button id="analyzeSeriesBtn" class="analyze-btn">
                                <i class="fas fa-layer-group"></i>
                                <span>分析系列课程</span>
                            </button>
                        </div>
                    </div>

                    <div id="seriesResults" class="series-results hidden">
                        <!-- 系列课程分析结果 -->
                    </div>
                </div>
            </section>

            <!-- 学习路径标签页 -->
            <section id="learningTab" class="content-section hidden">
                <div class="learning-path-builder">
                    <div class="path-input">
                        <h3>创建个性化学习路径</h3>
                        <div class="input-group">
                            <label>学习主题</label>
                            <input type="text" id="learningTopic" placeholder="例如：Python编程、机器学习、UI设计...">
                        </div>
                        <div class="input-group">
                            <label>学习水平</label>
                            <select id="learningLevel">
                                <option value="beginner">初学者</option>
                                <option value="intermediate">中级</option>
                                <option value="advanced">高级</option>
                            </select>
                        </div>
                        <button id="createPathBtn" class="create-btn">
                            <i class="fas fa-route"></i>
                            生成学习路径
                        </button>
                    </div>

                    <div id="pathResults" class="path-results hidden">
                        <!-- 学习路径结果 -->
                    </div>
                </div>
            </section>

            <!-- 知识图谱标签页 -->
            <section id="knowledgeTab" class="content-section hidden">
                <div class="knowledge-map">
                    <div class="map-input">
                        <h3>构建知识图谱</h3>
                        <div class="input-group">
                            <label>知识领域</label>
                            <input type="text" id="knowledgeTopic" placeholder="例如：人工智能、前端开发...">
                        </div>
                        <button id="buildMapBtn" class="build-btn">
                            <i class="fas fa-project-diagram"></i>
                            生成知识图谱
                        </button>
                    </div>

                    <div id="mapResults" class="map-results hidden">
                        <!-- 知识图谱可视化 -->
                    </div>
                </div>
            </section>

            <!-- 学习统计面板 -->
            <div class="learning-stats">
                <div class="stats-card">
                    <div class="stat-item">
                        <i class="fas fa-play-circle"></i>
                        <div class="stat-info">
                            <span class="stat-number" id="totalVideos">0</span>
                            <span class="stat-label">已分析视频</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-clock"></i>
                        <div class="stat-info">
                            <span class="stat-number" id="totalTime">0</span>
                            <span class="stat-label">学习时长(分钟)</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-fire"></i>
                        <div class="stat-info">
                            <span class="stat-number" id="learningStreak">0</span>
                            <span class="stat-label">连续学习天数</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-certificate"></i>
                        <div class="stat-info">
                            <span class="stat-number" id="skillsMastered">0</span>
                            <span class="stat-label">掌握技能</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <p>
                <i class="fas fa-heart"></i>
                Powered by <strong>Qwen3-Omni AI</strong> & <strong>bilibili-api</strong> |
                Made with ❤️ for BiliBili
            </p>
        </footer>
    </div>

    <!-- Toast提示 -->
    <div id="toast" class="toast hidden">
        <i class="toast-icon"></i>
        <span class="toast-message"></span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="enhanced_script.js"></script>
</body>
</html>